<template>
    <div class="cart-container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h2>商家管理</h2>
        </div>
        <div class="cart-container">
            <!-- 查询区域卡片 -->
            <el-card class="search-card">
                <el-row :gutter="10" justify="start" align="middle">
                    <el-col :span="4">
                        <label class="search-label">商家id:</label>
                        <el-input style="width: 140px" name="sjid" v-model="shangjia.sjid" placeholder="请输入商家id"></el-input>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" @click="doList">查询</el-button>
                    </el-col>
                    <el-col :span="2">
                        <el-button @click="reset">重置</el-button>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="success" @click="showAddDialog">新增商家</el-button>
                    </el-col>
                </el-row>
            </el-card>

            <!-- 表格区域卡片 -->
            <el-card class="table-card">
                <el-row justify="start">
                    <el-table
                        stripe
                        :data="shangjiaList"
                        style="width: 100%"
                        :default-sort="{ prop: 'sjid', order: 'ascending' }"
                    >
                        <el-table-column
                            prop="sjid"
                            label="商家id"
                            sortable
                        ></el-table-column>
                        <el-table-column
                            prop="name"
                            label="商家名"
                            sortable
                        ></el-table-column>
                        <el-table-column
                            prop="address"
                            label="地址"
                            sortable
                        ></el-table-column>
                        <el-table-column
                            prop="status"
                            label="营业状态"
                            sortable
                        ></el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button type="info" size="small" @click="showDetailPage(scope.row)">详情</el-button>
                                <el-button type="primary" size="small" @click="showUpdateDialog(scope.row)">修改</el-button>
                                <el-button type="danger" size="small" @click="doDelete(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="pagination-container">
                        <el-pagination
                            @update:page-size="handleSizeChange"
                            @update:current-page="handleCurrentChange"
                            :model-value="currentPage"
                            :page-sizes="[5, 10, 20, 30]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                    </div>
                </el-row>
            </el-card>

            <!-- 新增 dialog-->
            <el-dialog v-model="addDialogVisible" title="新增商家" width="40%" top="2vh" destroy-on-close>
                <add-shang-jia
                    @flushPage="reset"
                    @closeDialog="addDialogVisible = false">
                </add-shang-jia>
            </el-dialog>

            <!-- 更新 dialog-->
            <el-dialog v-model="updateDialogVisible" title="更新商家" width="40%" top="2vh" destroy-on-close>
                <update-shang-jia ref="updatePageRef"
                                  @flushPage="reset"
                                  @closeDialog="updateDialogVisible = false">
                </update-shang-jia>
            </el-dialog>

            <!-- 详情 页面 -->
            <detail-page ref="detailPageRef"></detail-page>

        </div>
    </div>
</template>

<script setup>
import { nextTick, onMounted, reactive, ref } from 'vue';
import axios from "axios";
import { ElMessage } from "element-plus";
import AddShangJia from "./AddShangJia.vue";
import UpdateShangJia from "./UpdateShangJia.vue";
import DetailPage from "../shangjia/DetailShangJia.vue";

const shangjia = reactive({
    sjid: '',
});
const shangjiaList = ref([]);
const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(0);

onMounted(() => {
    doList();
});

// 修改后的doList方法，添加分页参数
const doList = async () => {
    try {
        const params = {
            page: currentPage.value,
            size: pageSize.value,
            sjid: shangjia.sjid || undefined
        };


        const { data } = await axios.get('/api/shangjia/list', { params });
        console.log("后端返回完整数据:", data);

        if (data.code === 200) {
            // 1. 当前页数据在 data.data.records 中
            shangjiaList.value = data.data.records;

            // 2. 总记录数在 data.data.total 中
            total.value = data.data.total;
            console.log('当前 total 值:', total.value);

            ElMessage.success('查询成功');
        } else {
            ElMessage.error(data.message);
        }
    } catch (error) {
        console.error('查询失败:', error);
        ElMessage.error('查询失败，请重试');
    }
};

const reset = () => {
    shangjia.sjid = '';
    currentPage.value = 1; // 重置时回到第一页
    doList();
};

const addDialogVisible = ref(false);
const showAddDialog = () => {
    addDialogVisible.value = true;
};

const updateDialogVisible = ref(false);
const updatePageRef = ref();

const showUpdateDialog = (row) => {
    updateDialogVisible.value = true;
    nextTick(() => {
        updatePageRef.value.handleUpdateData(row);
    });
};

// 详显 dialog
const detailPageRef = ref();
const showDetailPage = (obj) => {
    detailPageRef.value.handleDetailData(obj);
};

const doDelete = async (row) => {
    const { data } = await axios.delete(`/api/shangjia/${row.sjid}`);
    console.log(data);
    if (data.code === 200) {
        ElMessage.success('删除成功');
        doList(); // 删除后刷新列表
    } else {
        ElMessage.error(data.message);
    }
};

// 处理分页事件
const handleSizeChange = (val) => {
    pageSize.value = val;
    doList();
};

const handleCurrentChange = (val) => {
    currentPage.value = val;
    doList();
};
</script>


<style scoped>
/* 页面容器 */
.cart-container {
    padding: 20px;
    background-color: #f9f9f9;
    min-height: calc(100vh - 40px);
}

.page-header {
    margin-bottom: 20px;
}

.page-header h2 {
    color: #f58147;
    font-weight: 600;
    margin: 0;
}

/* 查询区域卡片 */
.search-card {
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #f58147;
}

/* 表格区域卡片 */
.table-card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 查询标签 */
.search-label {
    color: #666;
    margin-right: 8px;
}

/* 查询输入框 */
.search-input {
    width: 140px !important;
}

/* 表格样式 */
:deep(.el-table__header th) {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 500;
}

:deep(.el-table__body tr:hover > td) {
    background-color: #f8f9fa !important;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
    background-color: #f8f9fa;
}

/* 按钮样式覆盖 */
:deep(.el-button--primary) {
    background-color: #007bff;
    border-color: #007bff;
}

:deep(.el-button--primary:hover) {
    background-color: #0069d9;
    border-color: #0062cc;
}

:deep(.el-button--success) {
    background-color: #28a745;
    border-color: #28a745;
}
.example-pagination-block + .example-pagination-block {
    margin-top: 10px;
}
</style>